<template>
	<view class="home-bg">

		<view class="home-card-bg">
			<!-- title -->
			<view class="home-title-container">
				<view class="home-title-left">
					<image src="/static/icons/u2130.jpg" mode=""></image>
					<text>家庭医生</text>
				</view>
				<uni-popup ref="popup" type="center">
					<view class="pop-content flex-ct">
						当前定位：{{city}}
					</view>
				</uni-popup>
				<view class="home-title-right">
					<image src="/static/icons/local.png" mode="" @click="getLocal"></image>
					<image src="/static/icons/scan.png" mode=""></image>
				</view>
				
			</view>

			<!-- search -->
			<view class="">
				<view class="search-container">
					<image src="/static/icons/search.png" mode=""></image>
					<text>搜索机构/医生</text>
				</view>
			</view>

			<!-- banner(swiper) -->
			<view class="banner-container">
				<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					indicator-active-color="#4480ec" :circular="true">
					<swiper-item v-for="item in 4" :key="item">
						<view class="banner-item">
							<view>家庭医生线上签约已开通</view>
							<text>提交签约申请 通过即可享受服务</text>
							<view class="banner-button">立即体验</view>
							<image src="/static/icons/doctor.png" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>


		<!-- main-container -->
		<view class="main-container">
			<!-- main-top -->
			<view class="main-top">
				<view class="main-top-item tred flex-main">
					<image src="/static/tred.png" mode=""></image>
					健康档案
				</view>
				<view class="main-top-item tyellow flex-main">
					<image src="/static/tyellow.png" mode=""></image>
					健康监测
				</view>
				<navigator url="/nearbyinstitutions/pages/Institutionslist/Institutionslist">
					<view class="main-top-item tgreen flex-main">
						<image src="/static/tgreen.png" mode=""></image>
						在线签约
					</view>
				</navigator>
			</view>
			<!-- main-bottom -->
			<view class="main-bottom">
				<navigator url="/pages/home/healthHeadline/healthHeadline">
					<view class="main-bottom-item flex-main">
						<image src="/static/health.png" mode=""></image>
						健康头条
					</view>
				</navigator>
				<view class="main-bottom-item flex-main">
					<image src="/static/care.png" mode=""></image>
					慢病护理
				</view>
				<view class="main-bottom-item flex-main">
					<image src="/static/yysearch.png" mode=""></image>
					用药查询
				</view>
				<view class="main-bottom-item flex-main">
					<image src="/static/yyremind.png" mode=""></image>
					用药提醒
				</view>
			</view>
		</view>

		
		<!-- 未签约时- - - - - - - - - - - - - - - -  -->
		<view class="noSign" v-if="userStore.userInfo?.state==1">
		<!-- todo delete -->
		<!-- <view class="noSign" v-if="false"> -->
			<!-- 附近机构 -->
			<view class="around-card">
				<!-- title -->
				<view class="around-card-title">
					<text>附近机构</text>
					<view class="around-card-more">
						<navigator url="/nearbyinstitutions/pages/Institutionslist/Institutionslist">
							<text>查看更多</text>
							<image src="/static/icons/rightrow.png" mode=""></image>
						</navigator>
					</view>
				</view>
				<!-- content -->
				<scroll-view class="around-card-content" :enable-flex="true" :scroll-x="true">
					<view class="around-card-inline"  v-for="item in organizationData" :key="item._id">
						<view class="around-card-item" @click="upToOrganization(item._id)">
							<image
								src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1424.svg"
								mode=""></image>
							<view class="" style="width: 320rpx;white-space: normal; line-height: 1.7;">
								<view class="service-name"><text>{{item.name}}</text></view>
								<text style="font-size: 24rpx;color: #999;">距您3.6km</text>
							</view>
						</view>
					</view>
			
					
				</scroll-view>
			</view>
			
			<!-- 附近团队 -->
			<view class="around-card">
				<!-- title -->
				<view class="around-card-title">
					<text>附近团队</text>
					<view class="around-card-more">
						<navigator url="/nearbyinstitutions/pages/nearbyteam/nearbyteam">
							<text>查看更多</text>
							<image src="/static/icons/rightrow.png" mode=""></image>
						</navigator>
					</view>
				</view>
				<!-- content -->
				<scroll-view class="around-card-content" :enable-flex="true" :scroll-x="true">
					<view class="around-card-inline" v-for="item in unTeamData" :key="item._id">
						<view class="around-card-item" @click="upToTeam(item._id)">
							<image
								src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1430.png"
								mode=""></image>
							<view class="" style="width: 300rpx;white-space: normal; line-height: 1.8;">
								<text class="team-text">{{item.name}}</text>
								<view class="team-text" style="font-size: 24rpx;color: #999;">{{item.organizationId.name}}</view>
								<text style="font-size: 24rpx;color: #999;">距您3.6km</text>
							</view>
						</view>
					</view>
			
					
				</scroll-view>
			</view>
		</view>

		
		<!-- 已签约时 - - - - - - - - - - -  -->
		<!-- todo state==1 -->
		<view class="haveSign" v-if="userStore.userInfo?.state==1">
			<!-- 我的签约团队 -->
			<view class="my-sign-container">
				<view class="my-sign-title">我的签约团队</view>
				<view class="my-sign-content">
					<image src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1430.png" mode=""></image>
					<view class="my-sign-team-title">李明明团队</view>
					<view class="">
						<text>团队长：李明明</text>&nbsp;
						<text>签约医生：王倩</text>
					</view>
					<button>申请服务</button>
				</view>
			</view>
			
			<!-- 服务提醒 -->
			<view class="service-container">
				<view class="my-sign-title">服务提醒</view>
				<view class="service-contianer-body">
					
					<view class="service-item">
						<view class="service-image-box flex-ct">
							<image src="/static/servicetx.png" mode=""></image>
						</view>
						<view class="service-text-box">
							<view class="">服务申请进度提醒</view>
							<text>医生已经通过了您的签约申请，查看...</text>
						</view>
						<view class="service-right-box">
							<image src="/static/reddot.png" mode=""></image>
							<image class="service-r" src="/static/right.png" mode=""></image>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '../../store/user';
import { onLoad } from '@dcloudio/uni-app'
import { getOrganizationsApi } from '../../api/organization';
import { getTeamApi } from '../../api/team';
// 引入腾讯地图
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js';

let qqmapsdk; //全局地图核心对象

const city = ref()
const organizationData= ref()
const unTeamData = ref()
const userStore = useUserStore()
const popup = ref(null)
onLoad(()=>{
	userStore.getUserInfoAction();
	getOrganization();
	getTeam();
	initQQMap();
})

const initQQMap = () => {
	// 实例化API核心类
	qqmapsdk = new QQMapWX({
		key:'HLDBZ-BTUH4-RXRUI-XGOES-6RDJJ-5BFM2'
	})
}
// 获取当前地址
function getLocal(){
	qqmapsdk.reverseGeocoder({
		success: function(res){
			city.value=res.result.address_component.city;
			popup.value.open('center');
			getOrganization({value:city.value});
			uni.setStorage({
				key:'city',
				// 将市级地址保存在Storage中
				data:JSON.stringify(res.result.address_component.city),
			})
		}
	})
}

// todo
function upToOrganization(data){
	// todo 跳转机构详情页面
	const url = '/nearbyinstitutions/pages/Institutionslisthome/Institutionslisthome'
	// console.log(data,'organizationId');
	uni.navigateTo({
		url:url + '?_id=' + data,
	})
}

function upToTeam(data){
	// todo 跳转团队详情页面
	const url = '/nearbyinstitutions/pages/teamdetails/teamdetails'
	// console.log(data,'teamId');
	uni.navigateTo({
		url:url + '?_id=' + data,
	})
}

const pageData = ref({
	currentPage:1,
	pageSize:3
})
// 获取附近机构
function getOrganization(data={}){
	getOrganizationsApi({
		...pageData.value,
		...data
	}).then(res=>{
		if(res.code==200){
			organizationData.value=res.data.rows
		}
	})
}
// 获取附近团队
function getTeam(data={}){
	getTeamApi({
		...pageData.value,
		...data
	}).then(res=>{
		if(res.code==200){
			unTeamData.value=res.data.rows
		}
	})
}

</script>

<style scoped lang="scss">
	.pop-content{
		width: 400rpx;
		height: 180rpx;
		border-radius: 24rpx;
		background-color: #fff;
	}
	.flex-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}

	.home-bg {
		background-color: #f8fafc;
		padding-bottom: 40rpx;
	}

	.home-card-bg {
		background-color: #fff;
	}

	.home-title-container {
		margin-top: 44px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
	}

	.home-title-left {
		display: flex;
		align-items: center;

		image {
			width: 64rpx;
			height: 68rpx;
			margin-right: 20rpx;
		}

		text {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
		}
	}

	.home-title-right {
		image {
			width: 34rpx;
			height: 34rpx;
		}

		image:last-child {
			width: 36rpx;
			height: 34rpx;
			margin-left: 32rpx;
		}
	}

	//  --------------------------------title---

	.search-container {
		margin: 0 auto;
		display: flex;
		align-items: center;
		width: 670rpx;
		height: 80rpx;
		border: 1px solid #ccc;
		border-radius: 15rpx;

		image {
			width: 32rpx;
			height: 34rpx;
			margin: 0 32rpx;
		}

		text {
			color: #ccc;
			font-size: 28rpx;
			font-weight: 400;
		}
	}


	// --------------------------------轮播图---
	.banner {
		margin: 40rpx auto 0;
		height: 380rpx;
	}

	.banner-item {
		// z-width:670rpx z-height:340rpx
		padding-left: 60rpx;
		padding-top: 40rpx;
		margin: 0 auto;
		width: 610rpx;
		height: 280rpx;
		background-color: #ebf2fd;
		border-radius: 20rpx;
		position: relative;

		view:first-child {
			font-size: 36rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		text:nth-child(2) {
			font-size: 24rpx;
			color: #999;
		}

		.banner-button {
			margin-top: 40rpx;
			width: 200rpx;
			height: 72rpx;
			background-color: #1877f2;
			border-radius: 20rpx;
			line-height: 72rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
		}

		image {
			width: 140rpx;
			height: 258rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}

	// ------------------------main-container---
	.main-container {
		width: 670rpx;
		height: 354rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 40rpx;
	}

	.main-top {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;

		.main-top-item {
			width: 200rpx;
			height: 176rpx;
			border-radius: 24rpx;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.tred {
			background-color: #FA746B;
		}

		.tyellow {
			background-color: #FDDB78;
		}

		.tgreen {
			background-color: #28D094;
		}
	}

	.main-bottom {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;

		.main-bottom-item {
			width: 160rpx;
			height: 156rpx;
			border-radius: 24rpx;
			font-size: 28rpx;

			image {
				width: 32rpx;
				height: 38rpx;
			}
		}
	}

	// ------------------around-----
	.around-card {
		width: 100%;
		height: 418rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.around-card-title {
		display: flex;
		justify-content: space-between;
		padding: 40rpx;
	}

	.around-card-more {
		text {
			font-size: 24rpx;
			color: #999;
		}

		image {
			width: 14rpx;
			height: 20rpx;
			margin-left: 16rpx;
		}
	}

	.around-card-content {
		white-space: nowrap;

		.around-card-inline {
			display: inline-block;
		}
	}

	.around-card-item {
		display: flex;
		margin-left: 40rpx;
		border: 1px solid #edf3fd;
		border-radius: 30rpx;
		padding: 40rpx;
		padding-right: 0;
		width: 452rpx;
		height: 148rpx;

		image {
			width: 160rpx;
			height: 160rpx;
			flex-shrink: 0;
			margin-right: 40rpx;
		}
	}

	.service-name{
		display: -webkit-box; /* 弹性伸缩盒子 */
		  -webkit-box-orient: vertical; /* 垂直排列 */
		  -webkit-line-clamp: 2; /* 显示行数 */
		  overflow: hidden; /* 超出隐藏 */
		  text-overflow: ellipsis; /* 显示省略号 */
	}
	.team-text{
		display: -webkit-box; /* 弹性伸缩盒子 */
		  -webkit-box-orient: vertical; /* 垂直排列 */
		  -webkit-line-clamp: 1; /* 显示行数 */
		  overflow: hidden; /* 超出隐藏 */
		  text-overflow: ellipsis; /* 显示省略号 */
	}
	
	// 已签约
	.my-sign-container{
		width: 750rpx;
		height: 774rpx;
		font-size: 40rpx;
		color: #333;
		background-color: #fff;
	}
	.my-sign-title{
		font-size: 40rpx;
		width: 670rpx;
		margin: 0 auto;
		height: 120rpx;
		line-height: 120rpx;
	}
	.my-sign-content{
		margin: 0 auto;
		width: 670rpx;
		height: 586rpx;
		border-radius: 24rpx;
		background-color: #fff;
		box-shadow: 0px 0px 20rpx 10rpx $uni-pages-bg;
		display: flex;
		flex-direction: column;
		align-items: center;
		.my-sign-team-title{
			margin-bottom: 10rpx;
		}
		text{
			font-size: 28rpx;
			color: #999;
		}
		image{
			width: 220rpx;
			height: 220rpx;
			margin: 40rpx 0 50rpx 0;
		}
		button{
			margin-top: 30rpx;
			background-color: #2984F8;
			width: 200rpx;
			height: 80rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			color: #fff;
		}
	}
	
	.service-item{
		padding: 30rpx 40rpx;
		width: 590rpx;
		height: 116rpx;
		border-radius: 24rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-bottom: 30rpx;
		.service-image-box{
			width: 88rpx;
			height: 88rpx;
			border-radius: 24rpx;
			background-color: #f6f1e1;

			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
		.service-text-box{
			font-size: 36rpx;
			text{
				font-size: 24rpx;
				color: #999;
			}
		}
		.service-right-box{
			height: 30rpx;
			display: flex;
			align-items: center;
			image:first-child{
				width: 16rpx;
				height: 16rpx;
				margin-right: 10rpx;
			}
			.service-r{
				width: 14rpx;
				height: 24rpx;
			}
		}
	}
	
</style>